<template>
  <n-config-provider
      :breakpoints="breakpoints"
      :date-locale="dateZhCN"
      :locale="zhCN"
      :theme-overrides="themeOverrides"
  >
    <n-theme-editor>
      <app-provider>
        <router-view/>
      </app-provider>
    </n-theme-editor>
  </n-config-provider>
</template>

<script setup>
import {computed} from 'vue'
import {darkTheme, zhCN, dateZhCN} from 'naive-ui'
import AppProvider from '@c/Application/index.vue'

const breakpoints = {xs: 0, s: 480, m: 768, l: 976, xl: 1440, xxl: 1920}

const themeOverrides = computed(() => {
  return {
    common: {
      textColorBase: '#000000E6',
      primaryColor: '#5372EC',
      primaryColorHover: '#5399EC',
      primaryColorPressed: '#5399EC',
      successColor: '#18BE6A',
      warningColor: '#FA8C16',
      errorColor: '#FF4D4F',
      placeholderColor: '#0000003D',
      dividerColor: '#E7EBEF',
      borderColor: '#E0E1E4',
      closeColor: '#0000003D',
      closeColorHover: '#7A7A7A',
    },
    LoadingBar: {
      colorLoading: '#5372EC'
    },
    Menu: {
      itemHeight: '56px',
      fontSize: '16px',
      itemTextColor: '#23262E99'
    },
    Card: {
      paddingMedium: '24px',
      paddingLarge: '32px',
      titleFontSizeMedium: '16px',
      titleTextColor: '#000000E6'
    },
    Statistic: {
      labelFontSize: '16px'
    },
    DataTable: {
      thColor: '#F8F8FBFF',
      thTextColor: '#00000099',
      tdTextColor: '#00000099',
      borderColor: '#E7EBEFFF',
      fontSizeLarge: '16px',
    },
    Tag: {
      fontSizeLarge: '16px',
      heightMedium: '32px',
      heightLarge: '40px'
    },
    Button: {
      colorQuaternaryHover: '#F7F9FF',
      colorQuaternaryPressed: '#F7F9FF',
      paddingLarge: '0 32px',
      fontSizeLarge: '16px',
      heightMedium: '32px',
      textColorTertiary: '#96A0B1',
      paddingMedium: '0 22px'
    },
    Input: {
      paddingLarge: '0 14px 0 8px'
    },
    Tabs: {
      tabFontSizeLarge: '18px',
      tabPaddingLargeLine: '20px 0',
      tabTextColorLine: '#00000099'
    },
    Dialog: {
      padding: '32px',
      contentMargin: '32px 0 8px',
      closeMargin: '32px 32px 0 0',
      textColor: '#96A0B1'
    },
    Badge: {
      colorInfo: '#5372EC',
      colorSuccess: '#18BE6A',
      colorError: '#FF4D4F',
      colorWarning: '#FA8C16'
    },
    Form: {
      labelFontSizeLeftLarge: '16px'
    },
    Typography: {
      headerFontSize2: '20px',
      headerMargin1: '28px 0 24px 0',
      headerMargin2: '28px 0 24px 0'
    },
    PageHeader: {
      fontSize: '18px',
      titleTextColor: '#000000E6',
      backColor: '#5372FC'
    }
  }
})
</script>
